import Card from '@/components/Card';
import Description from '@/components/Description';
import Empty from '@/components/Empty';
import { DATABASE_TYPE_ENUM, fetchDictInfo } from '@/utils';
import { Flex } from 'antd';
import type { DescriptionsProps } from 'antd/es/descriptions';
import React, { useEffect, useState } from 'react';
import { useIntl } from 'umi';
import Style from '../../index.less';

interface propsType {
  data?: API.EmmuVo['liquidCoolings'];
}
const Index: React.FC<propsType> = ({ data }) => {
  const intl = useIntl();
  const [isEmpty, setEmpty] = useState(false);

  const [Options, setOptions] = useState({
    type1: [],
    type2: [],
    type3: [],
    online: [],
    faultLeve: [],
    runState: [],
    runMode: [],
    tempMode: [],
  });

  const overallStateCopy = [
    {
      key: 'runningStatus',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.runningStatus' }),
      children: '',
    },
    {
      key: 'compressorCoolingStatus',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.compressorCoolingStatus' }),
      children: '',
    },
    {
      key: 'electricHeatingState',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.electricHeatingStatus' }),
      children: '',
    },
    {
      key: 'selfCirculation',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.selfCirculation' }),
      children: '',
    },
    {
      key: 'percentageOfWaterPumpSpeed',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.pumpSpeedPercentage' }),
      children: '',
    },
    {
      key: 'outdoorTemperature',
      label: `${intl.formatMessage({ id: 'stationRealtimeMonitoring.outdoorTemperature' })}`,
      children: '',
    },
    {
      key: 'inletWaterTemperature',
      label: `${intl.formatMessage({ id: 'stationRealtimeMonitoring.inletWaterTemperature' })}`,
      children: '',
    },
    {
      key: 'outletWaterTemperature',
      label: `${intl.formatMessage({ id: 'stationRealtimeMonitoring.outletWaterTemperature' })}`,
      children: '',
    },
    {
      key: 'waterInletPressure',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.inletWaterPressure' }),
      children: '',
    },
    {
      key: 'waterOutletPressure',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.outletWaterPressure' }),
      children: '',
    },
    {
      key: 'percentageOfFanOutput',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.fanOutputPercentage' }),
      children: '',
      span: 1,
    },
  ];

  const overallSensorCopy = [
    {
      key: 'faultLevel',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.faultLevel' }),
      children: '',
    },
    {
      key: 'statusInformation',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.statusInfo' }),
      children: '',
    },
    {
      key: 'faultInfo',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.faultInfo' }),
      children: '',
    },
    {
      key: 'disabled',
      label: '',
      children: '',
      hidden: true,
    },
  ];

  const overallParamsCopy = [
    {
      key: 'onOff',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.powerSwitch' }),
      children: '',
    },
    {
      key: 'runningState',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.operationMode' }),
      children: '',
    },
    {
      key: 'settingTemperature',
      label: `${intl.formatMessage({ id: 'stationRealtimeMonitoring.setTemperature' })}`,
      children: '',
    },
    {
      key: 'temperatureDifferenceMode',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.temperatureDifferenceMode' }),
      children: '',
    },
    {
      key: 'coolingStartsToRecover',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.coolingStartDifferential' }),
      children: '',
    },
    {
      key: 'coolingStopReturnDifference',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.coolingStopDifferential' }),
      children: '',
    },
    {
      key: 'heatingStartsToRecover',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.heatingStartDifferential' }),
      children: '',
    },
    {
      key: 'heatingStopsAndReturnsToDifferential',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.heatingStopDifferential' }),
      children: '',
      span: 1,
    },
  ];

  const baseInfoCopy = [
    {
      key: 'enable',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.isEnable' }),
      children: '',
    },
    {
      key: 'onlineState',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.onlineStatus' }),
      children: '',
    },
    // {
    //   key: 'faultLevel',
    //   label: '故障状态',
    //   children: '',
    // },
    {
      key: 'equipmentModel',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.deviceModel' }),
      children: '',
      span: 1,
    },
  ];

  const [overallState, setoverallState] = useState<DescriptionsProps['items']>(overallStateCopy);
  const [overallSensor, setoverallSensor] = useState<DescriptionsProps['items']>(overallSensorCopy);
  const [overallParams, setoverallParams] = useState<DescriptionsProps['items']>(overallParamsCopy);
  const [baseInfo, setbaseInfo] = useState<DescriptionsProps['items']>(baseInfoCopy);
  const [isDataLoaded, setIsDataLoaded] = useState(false);
  const changeFuntion = (key: any, result: any) => {
    const array = [
      // 'runningState',
      'compressorCoolingStatus',
      'electricHeatingState',
      'selfCirculation',
    ];
    const array2 = ['enable'];
    const array3 = ['onOff'];
    const array_onlineState = ['onlineState'];
    const array_faultLeve = ['faultLevel'];
    const array_runMode = ['runningState'];
    const array_tempMode = ['temperatureDifferenceMode'];
    if (array.includes(key)) {
      if (key === 'runState') {
        return Options.runState.find((res) => res.value === result)?.['label'] || null;
      } else {
        return Options.type1.find((res) => res.value === result)?.['label'] || null;
      }
    } else if (array2.includes(key)) {
      return Options.type2.find((res) => res.value === result)?.['label'] || null;
    } else if (array3.includes(key)) {
      return Options.type3.find((res) => res.value === result)?.['label'] || null;
    } else if (array_onlineState.includes(key)) {
      return Options.online?.find((res) => res.value === result)?.['label'] || null;
    } else if (array_runMode.includes(key)) {
      return Options.runMode?.find((res) => res.value === result)?.['label'] || null;
    } else if (array_faultLeve.includes(key)) {
      return Options.faultLeve?.find((res) => res.value === result)?.['label'] || null;
    } else if (array_tempMode.includes(key)) {
      // 新增判断
      return Options.tempMode?.find((res) => res.value === result)?.['label'] || null;
    } else {
      return result;
    }
  };

  const changeContent = (data) => {
    if (data && data?.length) {
      const desc1 = overallStateCopy
        .map((item) => {
          return {
            ...item,
            children:
              data?.[0]?.liquidCooledState?.[item.key] ||
              data?.[0]?.liquidCooledState?.[item.key] === 0
                ? changeFuntion(item.key, data?.[0]?.liquidCooledState?.[item.key])
                : null,
          };
        })
        .filter((res) => res.children !== null);
      setoverallState(desc1);

      const desc2 = overallSensorCopy
        .map((item) => {
          return {
            ...item,
            children:
              data?.[0]?.faultInformation?.[item.key] ||
              data?.[0]?.faultInformation?.[item.key] === 0
                ? changeFuntion(item.key, data?.[0]?.faultInformation?.[item.key])
                : null,
          };
        })
        .filter((res) => res.children !== null);
      setoverallSensor(desc2);

      const desc3 = overallParamsCopy
        .map((item) => {
          return {
            ...item,
            children:
              data?.[0]?.operatingParameters?.[item.key] ||
              data?.[0]?.operatingParameters?.[item.key] === 0
                ? changeFuntion(item.key, data?.[0]?.operatingParameters?.[item.key])
                : null,
          };
        })
        .filter((res) => res.children !== null);
      setoverallParams(desc3);

      const desc4 = baseInfoCopy
        .map((item) => {
          return {
            ...item,
            children:
              data?.[0]?.basicInformation?.[item.key] ||
              data?.[0]?.basicInformation?.[item.key] === 0
                ? changeFuntion(item.key, data?.[0]?.basicInformation?.[item.key])
                : null,
          };
        })
        .filter((res) => res.children !== null);
      setbaseInfo(desc4);

      if (!desc1.length && !desc2.length && !desc3.length && !desc4.length) {
        setEmpty(true);
      } else {
        setEmpty(false);
      }
    } else {
      setEmpty(true);
    }
  };

  useEffect(() => {
    if (!isDataLoaded) {
      Promise.all([
        fetchDictInfo(DATABASE_TYPE_ENUM.WORKING_STATE_OF_DEHUMIDIFICATION, true),
        fetchDictInfo(DATABASE_TYPE_ENUM.ENABLE_DEVI, true),
        fetchDictInfo(DATABASE_TYPE_ENUM.LIQUID_COOLED_SWITCH, true),
        fetchDictInfo(DATABASE_TYPE_ENUM.ONLINE_STATUS, true),
        fetchDictInfo(DATABASE_TYPE_ENUM.LIQUID_COOLING_OPERATION_STATE, true),
        fetchDictInfo(DATABASE_TYPE_ENUM.LIQUID_COOLING_OPERATION_STATE_MODE, true),
        fetchDictInfo(DATABASE_TYPE_ENUM.LIQUID_COOLED_FAULT_LEVE, true),
        fetchDictInfo(DATABASE_TYPE_ENUM.TEMP_MODE, true),
      ]).then((res) => {
        setOptions({
          type1: res[0],
          type2: res[1],
          type3: res[2],
          online: res[3],
          runState: res[4],
          runMode: res[5],
          faultLeve: res[6],
          tempMode: res[7],
        });
        setIsDataLoaded(true);
      });
    }
  }, []);

  useEffect(() => {
    if (isDataLoaded && data) {
      changeContent(data);
    }
  }, [isDataLoaded, data]);

  const column = { xxl: 3, xl: 2, lg: 1, md: 1, sm: 1 };

  return (
    <div
      style={{
        display: 'flex',
        flexWrap: 'wrap',
        gap: 0,
        flexDirection: 'column',
      }}
    >
      {!isEmpty ? (
        <>
          {overallState?.length ? (
            <Card
              title={intl.formatMessage({ id: 'stationRealtimeMonitoring.liquidStatus' })}
              className={Style.CardStyle}
            >
              <Description items={overallState} column={column} />
            </Card>
          ) : null}

          {overallSensor?.length ? (
            <Card
              title={intl.formatMessage({ id: 'stationRealtimeMonitoring.faultInfo' })}
              className={Style.CardStyle}
            >
              <Description items={overallSensor} column={column} />
            </Card>
          ) : null}

          {overallParams?.length ? (
            <Card
              title={intl.formatMessage({ id: 'stationRealtimeMonitoring.operationParams' })}
              className={Style.CardStyle}
            >
              <Description items={overallParams} column={column} />
            </Card>
          ) : null}

          {baseInfo?.length ? (
            <Card
              title={intl.formatMessage({ id: 'stationRealtimeMonitoring.basicInformation' })}
              className={Style.CardStyle}
            >
              <Description items={baseInfo} column={column} />
            </Card>
          ) : null}
        </>
      ) : (
        <Flex
          justify="center"
          align="center"
          style={{ width: '100%', height: '100%', marginTop: '290px' }}
        >
          <Empty />
        </Flex>
      )}
    </div>
  );
};

export default Index;
